<template>
  <div class="door">
    <link-area/>
    <h1>{{ msg }} is {{isOpen ? 'opened' : 'closed'}}</h1>
    <button @click="toggleDoor">switch</button>
    <dropdown/>
  </div>
</template>


<script>
  import { mapState, mapActions } from 'vuex'
  import Dropdown from '@/components/Dropdown'
  import LinkArea from '@/components/LinkArea'

  export default {
    name: 'Door',
    components: {
      Dropdown,
      LinkArea
    },
    data () {
      return {
        msg: 'Door'
      }
    },
    computed: {
      ...mapState({
        isOpen: state => state.door.isOpen
      })
    },
    mounted () {
      this.increment().then(() => {
        console.log('[Door] %s', 'incremented')
      })
    },
    methods: {
      ...mapActions({
        toggleDoor: 'door/toggleIsOpen',
        increment: 'count/increment'
      })
    }
  }
</script>


<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  .door {
    flex: 1;
  }
</style>
